<!DOCTYPE html>
<html>
	<head>

		<title>Leaflet browser print plugin for v1.3.4 | Print with Legend</title>
		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
		  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
		  crossorigin=""/>
		<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
		  integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
		  crossorigin=""></script>
		<script src="../dist/leaflet.browser.print.min.js"></script>
		<script type="text/javascript" src="data/us-states.js"></script>

		<style>
			html, body, #map { width: 100%; height: 100%; margin: 0px; padding: 0px;}
		</style>

		<style>
			.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
			.legend { text-align: left; line-height: 18px; color: #555; }
			.legend > * {
				display: flex;
				margin-bottom: 5px;
			}
			.legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }
		</style>
	</head>
	<body>

		<div id='map'></div>

		<script type="text/javascript">

			var map = L.map('map').setView([37.8, -96], 4);

			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
				maxZoom: 18,
				attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
					'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
					'Imagery © <a href="http://mapbox.com">Mapbox</a>',
				id: 'mapbox.light'
			}).addTo(map);


			// control that shows state info on hover
			var info = L.control();

			info.onAdd = function (map) {
				this._div = L.DomUtil.create('div', 'info');
				this.update();
				return this._div;
			};

			info.update = function (props) {
				this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
					'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
					: 'Hover over a state');
			};

			info.addTo(map);


			// get color depending on population density value
			function getColor(d) {
				return d > 1000 ? '#800026' :
						d > 500  ? '#BD0026' :
						d > 200  ? '#E31A1C' :
						d > 100  ? '#FC4E2A' :
						d > 50   ? '#FD8D3C' :
						d > 20   ? '#FEB24C' :
						d > 10   ? '#FED976' :
									'#FFEDA0';
			}

			function style(feature) {
				return {
					weight: 2,
					opacity: 1,
					color: 'white',
					dashArray: '3',
					fillOpacity: 0.7,
					fillColor: getColor(feature.properties.density)
				};
			}

			function highlightFeature(e) {
				var layer = e.target;

				layer.setStyle({
					weight: 5,
					color: '#666',
					dashArray: '',
					fillOpacity: 0.7
				});

				if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
					layer.bringToFront();
				}

				info.update(layer.feature.properties);
			}

			var geojson;

			function resetHighlight(e) {
				geojson.resetStyle(e.target);
				info.update();
			}

			function zoomToFeature(e) {
				map.fitBounds(e.target.getBounds());
			}

			function onEachFeature(feature, layer) {
				layer.on({
					mouseover: highlightFeature,
					mouseout: resetHighlight,
					click: zoomToFeature
				});
			}

			geojson = L.geoJson(statesData, {
				style: style,
				onEachFeature: onEachFeature
			}).addTo(map);

			map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');

			/* Good way to create custom control */
			L.LegendControl = L.Control.extend({
				onAdd: function (map) {

					var div = L.DomUtil.create('div', 'info legend');
					var grades = [0, 10, 20, 50, 100, 200, 500, 1000];
					var labels = [];
					var from;
					var to;

					for (var i = 0; i < grades.length; i++) {
						from = grades[i];
						to = grades[i + 1];

						labels.push(
							'<div><i style="background:' + getColor(from + 1) + '"></i> ' +
							from + (to ? '&ndash;' + to : '+') + "</div>");
					}

					div.innerHTML = labels.join('');
					return div;
				}
			});

			L.legendControl = function(options) {
			  	return new L.LegendControl(options);
			};

			// Here we are creating control to show it on the map;
			L.legendControl({position: 'bottomright'}).addTo(map);

		    L.control.browserPrint().addTo(map);

			map.on("browser-print-start", function(e){
				/*on print start we already have a print map and we can create new control and add it to the print map to be able to print custom information */
				L.legendControl({position: 'bottomright'}).addTo(e.printMap);
			});

		</script>

	</body>
</html>
